<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的订单</title>
    <base th:href="@{/}" href="/bookstore/"/>
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <link rel="stylesheet" href="static/css/bookManger.css" />
    <link rel="stylesheet" href="static/css/orderManger.css" />
    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
    <!--    引入jquery-->
    <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

  </head>
  <body>
  <!--  jquery 异步翻页  -->
  <script>
    function orderLoad(currentPage) {
      //发送ajax请求
      $.get("http://localhost:8080/bookstore/protected/orderClient", {
        pageNo: currentPage,
        method: 'orderPage'
      }, function (pb) {
        //解析Pagebean数据，展示到页面上
        //分页工具条数据展示
        //1.1展示总页码
        $("#totalPage").html(pb.pageTotal);
        //$("#currentPage").html(pb.pageNo);
        $("#bookCount").html(pb.itemsCount);
        $("#pageNoInput").attr("value",pb.pageNo);

        var spans = "";
        //计算上一页的页码
        var beforeNum = pb.pageNo - 1;
        if (beforeNum <= 0) {
          beforeNum = 1;
        }
        //首页
        var first='<span><a href="javascript:orderLoad(1); void(0);" onclick="orderLoad(1)">首页</a></span>'
        spans += first;
        //上一页
        var pre = '<span οnclick="javascript:orderLoad('+beforeNum+')"><a href="javascript:orderLoad('+beforeNum+'); void(0);">上一页</a></span>';
        spans += pre;
        //1.2展示分页页码
        /*
        一共展示10个页码，能够达到前5后4的效果
        如果前面不够5个，后面补齐总数到10个
        如果后面不足4个，前边补齐总数到10个
        */
        //定义开始位置 begin，结束位置 end
        var begin;
        var end;
        //要显示10个页码
        if (pb.pageTotal < 10) {
          //如果总页码都没有10页，就显示全部
          begin = 1;
          end = pb.pageTotal;
        } else {
          //总页码超过10页
          begin = pb.pageNo - 5;
          end = pb.pageNo + 4;
          //如果前边不够5个，后边补齐10个
          if (begin < 1) {
            begin = 1;
            end = begin + 9;
          }
          //如果后边不足4个，前面补齐10个
          if (end > pb.pageTotal) {
            end = pb.pageTotal;
            begin = end - 9;
          }
        }
        for (var i = begin; i <= end; i++) {
          var span;
          //判断当前页码是否等于i
          //创建不同格式的页码li
          if (pb.pageNo == i) {
            span = ' <a href="javascript:orderLoad('+i+'); void(0);" class="active" οnclick="orderLoad('+i+')" id="page'+i+'">' + i + '</a>';
          } else {
            span = ' <a href="javascript:orderLoad('+i+'); void(0);" οnclick="orderLoad('+i+')" id="page'+i+'">' + i + '</a>';
          }
          spans += span;
        }
        var nextPage = pb.pageNo + 1;
        if (nextPage > pb.pageTotal) {
          nextPage = pb.pageTotal;
        }
        var next = ' <span οnclick="javascript:orderLoad('+nextPage+')" ><a href="javascript:orderLoad('+nextPage+'); void(0);">下一页</a></span>';
        var last = ' <span οnclick="javascript:orderLoad('+pb.pageTotal+')"><a href="javascript:orderLoad('+pb.pageTotal+'); void(0);">  末页</a></span>';
        spans += next;
        spans += last;
        $("#pageNum").html(spans);
        //列表数据展示
        var book_ps = "";
        for (var i = 0; i < pb.pageItems.length; i++) {
          var order = pb.pageItems[i];
          var status=""
          if (order.orderStatus==0){
            status="等待发货";
          }else if (order.orderStatus==1){
            status="已发货";
          }else if (order.orderStatus==2){
            status="确认收货";
          }else if (order.orderStatus==3){
            status="已收货";
          }else if (order.orderStatus==4){
            status="已退货";
          }
          var p = '<tr id="order'+order.orderId+'">'+
                  '<td>'+order.orderSequence+'</td>\n'+
                  '<td>'+order.createTime+'</td>\n'+
                  '<td>'+order.totalAmount+'</td>\n'+
                  '<td>'+order.totalCount+'</td>\n'

          if(order.orderStatus==2){
            p +='<td><a href="javascript:receive('+order.orderId+','+order.orderStatus+'); void(0); " id="noSend">'+status+'</a></td>\n'
          }else if(order.orderStatus!=2){
            p +='<td><a href="#" class="send" >'+status+'</a></td>\n'
          }
          p +='<td><a href="/bookstore/protected/orderClient?method=showOrderDetails&orderId='+order.orderId +'&orderStatus='+order.orderStatus+'">查看详情</a></td>\n'+
              '</tr>'
          book_ps += p;
        }
        $(".list-content").html(book_ps);

      });
      // var currentId="#page"+currentPage;
      // $("page1").style.color="#39987c";
    };
    //首次刷新页面
    orderLoad(1);
  </script>

    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="index.html">
            <img src="static/img/logo.gif" alt=""
          /></a>
          <h1>我的订单</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span><b th:text="${session.loginUser.userName} ? ${session.loginUser.userName} :${session.registerUser.userName} ">Drimwai</b></span>光临书城</h3>
          <div class="order"><a href="javascript:orderLoad(1);void(0);" onclick="orderLoad(1)">我的订单</a></div>
          <div class="destory"><a href="user?method=logout">注销</a></div>
          <div class="gohome">
            <a href="index.html">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>订单号</th>
              <th>订单日期</th>
              <th>订单金额</th>
              <th>订单数量</th>
              <th>订单状态</th>
              <th>订单详情</th>
            </tr>
          </thead>
          <tbody class="list-content">
          </tbody>
        </table>

        <div class="list-footer">
          <div id="pageNum">
          </div>
          共<b id="totalPage"></b>页&nbsp;
          <b id="bookCount"></b>条记录&nbsp;&nbsp;
          <span>到第</span>&nbsp;<input  id="pageNoInput" value="" />&nbsp;<span>页</span>
          <button onclick="toPage()">确定</button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于我们</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>https://www.drimwai.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        Drimwai's Bookstore.Copyright ©2021
      </div>
    </div>

  <script>
    function toPage() {
      var pageNo = $("#pageNoInput").val();
      orderLoad(pageNo);
    }
    //点击发货
    function receive(orderId,orderStatus) {
      if (!confirm("你确定订单" + orderId + "已收货吗?")) {
        return;
      }
      $.get("http://localhost:8080/bookstore/protected/orderClient", {
        orderId: orderId,
        orderStatus:orderStatus,
        method: 'send'
      }, function() {
        alert("收货成功");
        document.querySelector('#order'+orderId).querySelector('#noSend').innerHTML='已收货';
        document.querySelector('#order'+orderId).querySelector('#noSend').className='send';
      })
    }
  </script>
  </body>
</html>
